<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    html,
    body {
        padding: 0px;
        margin: 0px;
    }

    .formpane {
        top: 10px;
        right: 10px;
        /* background: rgba(230, 230, 230, 0.85); */
    }

    .main {
        margin: 0px;
        padding: 0px;
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }
    </style>
    <script src="script/ht.js"></script>

    <script src="lib/plugin/ht-form.js"></script>
</head>

<body>
    <script>
    window.onload = init()


    function init() {
        dataModel = new ht.DataModel();
        // graphView = new ht.graph.GraphView(dataModel);
        // view = graphView.getView();
        ht.Default.setImage('mac', 'images/1.png')
        treeView = new ht.widget.TreeView(dataModel);
        view = treeView.getView();
     /*   var group = new ht.Group();
        group.setName('Double click on me');
        group.setExpanded(true);
        dataModel.add(group);

        var group1 = new ht.Group();
        group1.setName('grou');
        group1.setExpanded(true);
        dataModel.add(group1);
*/
        view.className = 'main';
        document.body.appendChild(view);
        /*var a = new ht.Node()
        a.setImage('mac')
        // a.setStyle('ingroup', false);

        a.setPosition(300, 90);
        a.setSize(80, 43);
        group.addChild(a);

        dataModel.add(a);


        var b = new ht.Node()
        b.setImage('mac')
        b.setPosition(180, 70);
        b.setSize(40, 43);
        b.setRotation(Math.random());
        // group1.addChild(b);
        dataModel.add(b);

        b.setParent(group1);


        a.setHost(b);

         //设置为可编辑
         graphView.setEditable(true);

         graphView.setRectEditableFunc(function(data){
            return data === a
        })

        graphView.setRotationEditableFunc(function(data){
            return data === b
        })

        var edge = new ht.Edge();
        edge.setSource(a);
        edge.setTarget(b);
        dataModel.add(edge);

        edge = new ht.Edge(a, b);
        edge.toggle();
        dataModel.add(edge);

        edge = new ht.Edge(a, a);
        dataModel.add(edge);

        graphView.getLabel = function(data){
            if(data instanceof ht.Edge){
                if(data.isEdgeGroupAgent()){
                    return data.getEdgeGroupSize() + ' become 1';
                }
            }
            return data.getName();
        };


        var node3 = new ht.Node();
        node3.setPosition(130, 140);
        node3.s({
            'label.font': 'bold 21px arial',
            'label.color': 'white',
            'label.offset.y': 8,
            'label.background': '#E74C3C'
        });
        node3.setName('HT for Web');
        node3.setParent(group);
        dataModel.add(node3);

        var oldFunc = graphView.getBoundsForGroup;
        graphView.getBoundsForGroup = function(child){
            if(child === node3){
                return node3.getRect();
            }
            return oldFunc.call(this, child);
        };


        for(var i=0; i<8; i++){
            ht.Default.setImage('girl' + i, 'images/' + i + '.png');
        }

        grid = new ht.Grid();
        grid.setSize(600, 440);
        grid.setStyle('grid.row.count', 3);
        grid.setStyle('grid.column.count', 6);
        grid.setStyle('grid.border', 1);
        grid.setStyle('grid.gap', 11);
        grid.setStyle('grid.depth', 5),
            grid.setStyle('grid.cell.depth', -5),
            grid.setStyle('grid.cell.border.color', '#ff2222');
        grid.setStyle('grid.background', '#E5BB77');
        grid.setStyle('select.width', 22);
        grid.setPosition(800, 300);
        dataModel.add(grid);

        for(var i=0; i<8; i++){
            var node = new ht.Node();
            node.setImage('girl' + i);
            node.setStyle('attach.row.index', Math.floor(i / 6));
            node.setStyle('attach.column.index', i % 1);
            node.setStyle('attach.padding', -2);
            node.setStyle('select.width', 0);
            node.setHost(grid);
            dataModel.add(node);
        }

        //subgraph
        var subgraph = new ht.SubGraph()
        subgraph.setName('sub')
        subgraph.setPosition(800,500)
        subgraph.setStyle('note', 'double click to drill down');
        dataModel.add(subgraph);

        var node2 = new ht.Node();
        node2.setName('Node2');
        node2.setPosition(180, 80);
        node2.setStyle('note', 'ssss');

        subgraph.addChild(node2);
        dataModel.add(node2);
*/




        var data = new ht.Data();
        data.setName('mac');
        data.setIcon('mac');
        // data.setParent(parent); // or parent.addChild(data);
        dataModel.add(data);
console.log(dataModel.sm())







    }
    </script>
</body>

</html>